<template>
    <div class="alter-wrapper">
      <header>
        <li @click="goToIndex" class="back-button">
          <img class="icon" :src="'src/img/left.png'" alt="返回图标">
          返回
        </li>
        <h1>医院信息提示</h1>
      </header>
      <main>
        <ul>
          <li @click="showContent('tip1')">
            小程序使用温馨提示
          </li>
          <li @click="showContent('tip2')">
            复诊续方操作须知
          </li>
        </ul>
        <div v-if="currentTip" class="tip-content">
          <h2>{{ currentTipTitle }}</h2>
          <p v-html="currentTipContent"></p>
        </div>
      </main>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        currentTip: null,
        tips: {
          tip1: {
            title: "小程序使用温馨提示",
            content: `
              <p>欢迎使用爱心医院小程序！在这里，您可以方便地进行在线预约、查看健康报告、咨询医生等操作。以下是一些温馨提示：</p>
              <ul>
                <li>确保您的网络连接正常，以便顺利使用各项功能。</li>
                <li>注册并登录您的账号，享受更多个性化服务。</li>
                <li>预约前请详细阅读各项服务的说明，以确保选择适合您的服务。</li>
                <li>如有任何疑问或技术问题，请通过小程序中的客服功能联系我们。</li>
              </ul>
              <p>感谢您的支持，祝您身体健康！</p>
            `
          },
          tip2: {
            title: "复诊续方操作须知",
            content: `
              <p>亲爱的患者，感谢您选择爱心医院的医疗服务。为了更好地帮助您完成复诊和续方操作，请您仔细阅读以下须知：</p>
              <ul>
                <li>复诊续方需提前预约，请通过小程序中的“在线预约”功能进行预约。</li>
                <li>复诊当天请携带您的医疗卡和身份证件，确保信息准确无误。</li>
                <li>如果您有任何药物过敏史或特殊需求，请在预约时注明。</li>
                <li>复诊时请详细告知医生您的病情变化和药物使用情况，以便医生做出准确判断。</li>
                <li>如需续方，请提前准备好相关的处方和病历记录。</li>
              </ul>
              <p>如有疑问，请随时通过小程序中的客服功能联系我们。祝您早日康复！</p>
            `
          }
        }
      };
    },
    computed: {
      currentTipTitle() {
        return this.currentTip ? this.tips[this.currentTip].title : "";
      },
      currentTipContent() {
        return this.currentTip ? this.tips[this.currentTip].content : "";
      }
    },
    methods: {
      showContent(tipKey) {
        this.currentTip = tipKey;
      },
      goToIndex() {
        this.$router.push('/index');
      }
    }
  };
  </script>
  
  <style scoped>
  /* 跳转设置 */
  .back-button {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  
  .icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
  }
  
  .alter-wrapper {
    padding: 1rem;
    background-color: #f9f9f9;
    min-height: 100vh;
  }
  
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
  }
  
  header h1 {
    font-size: 1.25rem;
  }
  
  main ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
  }
  
  main ul li {
    cursor: pointer;
    padding: 1rem;
    background-color: #127A90;
    color: white;
    border-radius: 5px;
    width: 45%;
    text-align: center;
    transition: background-color 0.3s;
  }
  
  main ul li:hover {
    background-color: #0f5d6f;
  }
  
  .tip-content {
    margin-top: 2rem;
    background-color: #fff;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .tip-content h2 {
    margin-top: 0;
  }
  
  .tip-content p {
    line-height: 1.6;
  }
  
  .tip-content ul {
    list-style-type: none;
    padding-left: 1.5rem;
  }
  
  .tip-content ul li {
    margin-bottom: 0.5rem;
  }
  </style>
  